<template>
	<uv-picker ref="pickerRef" :columns="addressList" :defaultIndex="adress.pickerValue" :loading="adress.loading"
		keyName="name" :confirmColor="app.globalData.primaryColor" @change="change" @confirm="confirm">
	</uv-picker>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		computed,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const app = getApp()
	const adress = reactive({
		loading: false,
		provinces: [], //省
		citys: [], //市
		areas: [], //区
		pickerValue: [0, 0, 0],
		defaultValue: [3442, 1, 2]
	})
	const addressList = computed(() => [adress.provinces, adress.citys, adress.areas])
	onMounted(() => {
		getData()
	})
	const getData = () => {
		adress.loading = true
		app.post('api.auth.Address/china').then(res => {
			adress.provinces = res.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
			handlePickValueDefault()
			adress.loading = false
		})
	}
	const setPickValue = (value) => {
		const {
			province,
			city,
			area
		} = value
		// 设置省
		adress.pickerValue[0] = adress.provinces.findIndex(item => item.name === province);
		// 设置市
		adress.citys = adress.provinces[adress.pickerValue[0]]?.children || [];
		adress.pickerValue[1] = adress.citys.findIndex(item => item.name === city);
		// 设置区
		adress.areas = adress.citys[adress.pickerValue[1]]?.children || [];
		adress.pickerValue[2] = adress.areas.findIndex(item => item.name === area);
		// 重置下位置
		pickerRef.value?.setIndexs(adress.pickerValue, true);

		console.log(adress.pickerValue);
	}
	const pickerRef = ref(null)
	const open = (value) => {
		pickerRef.value.open()
		value && value.province && value.city && value.area && setPickValue(value)
	}
	const handlePickValueDefault = () => {
		// 设置省
		adress.pickerValue[0] = adress.provinces.findIndex(item => Number(item.id) === adress.defaultValue[0]);
		// 设置市
		adress.citys = adress.provinces[adress.pickerValue[0]]?.children || [];
		adress.pickerValue[1] = adress.citys.findIndex(item => Number(item.id) === adress.defaultValue[1]);
		// 设置区
		adress.areas = adress.citys[adress.pickerValue[1]]?.children || [];
		adress.pickerValue[2] = adress.areas.findIndex(item => Number(item.id) === adress.defaultValue[2]);
		// 重置下位置
		pickerRef.value?.setIndexs(adress.pickerValue, true);
	}
	const change = (e) => {
		if (adress.loading) return;
		const {
			columnIndex,
			index,
			indexs
		} = e
		// 改变了省
		if (columnIndex === 0) {
			adress.citys = adress.provinces[index]?.children || []
			adress.areas = adress.citys[0]?.children || []
			pickerRef.value.setIndexs([index, 0, 0], true)
		} else if (columnIndex === 1) {
			adress.areas = adress.citys[index]?.children || []
			pickerRef.value.setIndexs(indexs, true)
		}
	}
	const emit = defineEmits(["setAddress"]);
	const confirm = (value) => {
		emit("setAddress", value);
	}
	defineExpose({
		open,
	})
</script>


<style lang="scss" scoped></style>